<template>
    <!-- 侧边栏 -->
    <div class="sidebar">
        <el-row class="tac">
            <el-col>
                <el-menu router active-text-color="#1684ff" unique-opened background-color="#151515"
                    class="el-menu-vertical-demo" :default-active="route.path" text-color="#fff">

                    <div v-for="item in MenuItemArr" :key="item.index">
                        <el-sub-menu :index="item.index" v-if="item.child">
                            <template #title>
                                <el-icon>
                                    <location />
                                </el-icon>
                                <span>{{ item.name }}</span>
                            </template>
                            <el-menu-item v-for=" chd in item.child" :key="chd.index" :index="chd.index">
                                {{ chd.name }}
                            </el-menu-item>
                        </el-sub-menu>
                        <el-menu-item :index="item.index" v-else>
                            <el-icon><icon-menu /></el-icon>
                            <span>{{ item.name }}</span>
                        </el-menu-item>
                    </div>


                </el-menu>
            </el-col>
        </el-row>
    </div>
</template>

  
<script setup>
import {
    Menu as IconMenu,
    Location,
} from '@element-plus/icons-vue'
import { ref } from "vue";
import { useRoute } from 'vue-router';
const route = useRoute()
const MenuItemArr = ref([
    { name: '店铺设置', index: '1', 
       child: [{ name: '添加账号', index: '/management/home/accAdd' },
               { name: '账号列表', index: '/management/home/accList' },
               { name: '店铺详情', index: '/management/home/shopinfo' },
               { name: '拖拽', index: '/management/home/dnd' },
               ]
    },
    { name: '商品设置', index: '21' }
])
</script>

<style lang="scss" scoped>
.sidebar {
    height: 100%;
    width: 200px;
    background-color: #151515;
    overflow-y: auto;
}
</style>